<template>
	<view class="all_box">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="banner">
						<image class="banner-tp" src="../../static/Country_img/bjt.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="banner">
						<image class="banner-tp" src="../../static/Country_img/guji.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="banner">
						<image class="banner-tp" src="../../static/Country_img/tianye.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="search">
				<view class="search-xc-img">
					<image class="search_pic" src="../../static/shousuo.png"></image>
				</view>
				<input v-model="keyword" type="text" placeholder="搜索目的地/景点" placeholder-style="color: black;"
					class="search-xc-box" @input="search">
			</view>
			<view class="small_log">
				<view class="log" @click="goactive">
					<image class="log_pic" src="../../static/Country_img/hd.png" mode=""></image>
					<text class="log_wz">活动</text>
				</view>
				<view class="log" @click="goSpecialtyList">
					<image class="log_pic" src="../../static/sp.png" mode=""></image>
					<text class="log_wz">地方特产</text>
				</view>
				<view class="log" @click="gohumanty">
					<image class="log_pic" src="../../static/rwls.png" mode=""></image>
					<text class="log_wz">人文历史</text>
				</view>
			</view>
		</view>
		<view class="country_mouble">
			<view class="country_mouble_title">
				<view class="tab_nav">
					<view class="tab_nav_title" v-for="(item, index) in items" :class="{ 'btna': count === index }"
						@tap="change(index)" :key="index">{{ item }}</view>
				</view>
			</view>
			<view class="tab_con">
				<view class="discount_info" :class="{ dis: count === 1 }">
					<view class="trip_mouble" v-for="(item, id) in list_country" :key="item.id">
						<view class="trip_mouble_left">
							<image class="trip_mouble_pic" :src="$Config.HOST + '/public' + item.thumb"></image>
						</view>
						<view class="trip_mouble_right">
							<view class="trip_mouble_right_wz">
								<text class="trip_mouble_right_tag">{{ item.tag }}</text>
								<text class="trip_mouble_right_name">{{ item.name }}</text>
							</view>
							<view class="trip_mouble_rightBottom">
								<image class="trip_mouble_rightBottom_pic" src="../../static/juli.png" mode=""></image>
								<text class="trip_mouble_rightBottom_long">{{ item.distance }}</text>
								<text class="trip_mouble_rightBottom_chakan"
									@click="gocountry_detail(item.id)">查看</text>
							</view>
						</view>
					</view>
				</view>
				<view class="discount_info" :class="{ dis: count === 0 }">

				</view>
			</view>

		</view>
	</view>




</template>

<script>
export default {
	data() {
		return {
			indicatorDots: true, //是否显示面板指示点
			autoplay: true, //是否切换
			interval: 2000, //自动接环时间间隔
			duration: 500, //滑动动画时常
			items: ["推荐乡村", "附近乡村"],
			keyword: '',
			list_country: [],
			list_countrySome: [],
			count: 0,

		}
	},
	onLoad() {
		let that = this
		uni.request({
			url: 'http://village.yqxbxb.com/api/villages/Vill',
			method: 'GET',
			success(res) {
				console.log(res)
				that.list_country = res.data.data.data

			}
		})
	},
	methods: {

		search() {
			this.list_country = this.list_countrySome.filter(item => {
				return item.title.includes(this.keyword);
			})
		},
		change(index) {
			this.count = index;
		},
		goSpecialtyList() {
			uni.navigateTo({
				url: "/pages/Country/Spexialty_list/Spexialty_list"
			})
		},
		gohumanty() {
			uni.navigateTo({
				url: '/pages/Country/humanty_list/humanty_list'
			})
		},

		goactive() {
			uni.navigateTo({
				url: "/pages/Country/active_list/active_list"
			})
		},
		gocountry_detail(e) {
			uni.navigateTo({
				url: "/pages/Country/Country_detial/Country_detial?id=" + e
			})
			console.log(e)
		},

		todetail() {
			uni.navigateTo({
				url: "/pages/Country/active_list/active_list"
			})
		},

		gocountry_detail(e) {
			uni.navigateTo({
				url: "/pages/Country/Country_detial/Country_detial?id=" + e
			})
			console.log(e);
		}
	}
	// computed: {
	// 	 decodedDetail() {
	// 	      return this.detail.replace(/&lt;|&gt;|&quot;|&amp;/g, match => {
	// 	        switch(match) {
	// 	          case '&lt;':
	// 	            return '<';
	// 	          case '&gt;':
	// 	            return '>';
	// 	          case '&quot;':
	// 	            return '"';
	// 	          case '&amp;':
	// 	            return '&';
	// 	        }
	// 	      });
	// 	    }
	// }
}
</script>

<style>
page {
	background-color: #e1e4e1;
}

.all_box {
	overflow: hidden;
}

.uni-marin-wrap {
	width: 100%;
	height: 360rpx;
}

.swiper {
	width: 100%;
	height: 360rpx;
	overflow: hidden;
	position: relative;
}

.banner-tp {
	width: 100%;
	height: 360rpx;

}

.search {
	width: 500rpx;
	height: 65rpx;
	border: 2rpx solid;
	border-radius: 30rpx;
	border-color: #c7ccbb;
	text-align: center;
	position: absolute;
	top: 100rpx;
	left: 134rpx;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	background-image: url(../..atic/Country_img/dh.png);

}

.search-xc-box {
	width: 100%;
	position: absolute;
	text-align: center;
	line-height: 65rpx;
	height: 100%;


}

.search_pic {
	width: 50rpx;
	height: 50rpx;
	position: relative;

}

.search-xc-img {
	margin-top: 10px;
	margin-left: 40px;
}

.small_log {
	width: 90%;
	height: 160rpx;
	background-color: white;
	margin: 20rpx auto;
	display: flex;

}

.log {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 auto;

}

.log:active {
	transform: scale(1.1);
	/* 点击时的缩放效果 */
	transition: transform 0.1s;
	/* 过渡动画时间 */
}

.log_pic {
	width: 80rpx;
	height: 80rpx;
}

.log_wz {
	font-size: 35rpx;
	margin-top: 10rpx;
}

.tab_nav {
	display: flex;
	font-size: 35rpx;
	background-color: white;
	width: 90%;
	margin: 0 auto;
}

.tab_nav_title {
	margin-left: 25rpx;
}

.btna {
	display: flex;
	color: #1ADC1E;
	background-color: #fff;
	border-bottom: 2px solid #1ADC1E;
	margin-bottom: 10rpx;
}

.dis {
	display: none;
}

.trip_mouble {
	width: 90%;
	height: 200rpx;
	background-color: white;
	margin: 0 auto 15rpx;
	display: flex;
}

.trip_mouble_right_wz {
	margin: 20rpx 0 0 20rpx;
}

.trip_mouble_pic {
	width: 280rpx;
	height: 200rpx;
}

.trip_mouble_right {
	display: flex;
	flex-direction: column;
}

.trip_mouble_rightBottom {
	margin-top: 50rpx;
}

.trip_mouble_rightBottom_pic {
	width: 30rpx;
	height: 30rpx;
	margin: 20rpx 20rpx 0 20rpx;
}

.trip_mouble_rightBottom_long {
	font-size: 20rpx;
}

.trip_mouble_rightBottom_chakan {
	padding: 0 20rpx;
	margin-left: 30rpx;
	background-color: #1ADC1E;
	color: white;
}

.trip_mouble_rightBottom_chakan:active {
	transform: scale(1.1);
	/* 点击时的缩放效果 */
	transition: transform 0.1s;
	/* 过渡动画时间 */
	background-color: aqua;
}
</style>